<nav class="navbar navbar-default navbar-fixed-top active">
    <div class="container active">
        <div class="navbar-header">
            <image
                src="__TMPL__/public/assets/images/logo.png"
                mode="scaleToFill"
                class="logo"
            />
        </div>

        <div class="collapse navbar-collapse active" style="height:3.646vw !important" id="bs-example-navbar-collapse-1">
            <ul id="main-menu" class="nav navbar-nav" style="height:3.646vw !important">
                <navigation nav-id="" root="" id="main-navigation" class="nav navbar-nav navbar-nav-custom"
                    max-level="0">
                    <navigationMenu>
                        <if condition="$level gt 1">
                            <li class="menu-item menu-item-level-{$level} levelgt1" style="height:3.646vw !important">
                                <a href="{$menu.href|default=''}" target="{$menu.target|default=''}">
                                    {$menu.name|default=''}
                                </a>
                            </li>
                            <else />
                            <li class="menu-item menu-item-level-{$level}" style="height:3.646vw !important">
                                <a href="{$menu.href|default=''}" target="{$menu.target|default=''}"
                                    style="font-size: 0.833vw;color:#FFF;height:3.646vw !important">
                                    {$menu.name|default=''}
                                </a>
                            </li>
                        </if>
                    </navigationMenu>
                    
                    <navigationFolder root="li" class="dropdown dropdown-custom dropdown-custom-level-{$level}"
                                    dropdown="ul" dropdown-class="dropdown-menu dropdown-menu-level-{$level}">
                                    <a href="#" class="dropdown-toggle dropdown-toggle-{$level}"
                                        style="color:#FFF; font-size: 0.833vw;">
                                        {$menu.name|default=''}<span class="caret"></span>
                                    </a>
                    </navigationFolder>
                </navigation>
            </ul>
        </div>
        <div class="btnBox" >
            <div class="btn" style="margin-right: 1.042vw;">
                <a href="{$theme_vars.exurl}" style="color: #FFF;text-decoration: none;">
                    报名参展
                </a>
            </div>
            <div class="btn" style="background-color: #2da0bd;">
                <a href="{$theme_vars.visiturl}" style="color: #FFF;text-decoration: none;">
                    报名参观
                </a>
            </div>
        </div>
        
    </div>
</nav>

<style>
    .container {
        width:100vw;
        display: flex;
        justify-content:flex-start;
        align-items: center;
        color: #FFF !important;
        padding: 0;
        height:3.646vw !important;
        position: relative;
    }
    .navbar-header{
        width: 18.75vw;
        height:3.646vw !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navbar-header .logo{
        width: 6.25vw;
        height: 2.188vw;
    }
    .navbar {
        margin-bottom: 0 !important;
        background: #000;
        color: #FFF;
        height:3.646vw !important;
        min-height:3.646vw !important;
    }

    a:focus {
        outline: none;
        -moz-outline: none;
    }
    
    .navbar-nav .dropdown a {
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        height:3.646vw;
    }
    /*更改导航栏选中及悬浮状态颜色 */
    .navbar-default .navbar-nav>.active>a{
        background-color: #FF913C;
        
    }
    .dropdown-menu>.active>a{
        background-color: #FF913C;
    }
    .dropdown-menu>li>a:hover{
        background-color: #FF913C!important;
        text-align: center;
    }
    /* 悬浮 */
    .navbar-nav .menu-item-level-1:hover{
        background-color: #FF913C !important;
       
    }

    .navbar-nav .menu-item-level-1 a {
        height:3.646vw;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 5vw;
        
    }

    .dropdown-menu .menu-item-level-2 a {
        padding: 1.042vw 1.302vw !important;
        display: flex;
        align-items: center;
        justify-content: center;
        height:3.646vw;
    }
    
    .btnBox{
        position: absolute;
        right: 18.75vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
       
    }
    .btn{
        background-color: #FF913C;
        font-size:0.833vw;
        border-radius: 0.26vw;
        padding: 0.313vw 0.729vw;
        
    }
    @media (min-width: 768px) {
        .navbar-nav>li>a {
            padding-top: 0px; 
            padding-bottom: 0px;
        }
    }
</style>